﻿<div [@routerTransition]>

  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>管道流程</span>
        </h3>
        <span class="m-section__sub">
          管道流程的文本头信息
        </span>
      </div>
      <div class="col-xs-6 text-right">
        <!-- <button *ngIf="isGranted('Pages.Administration.Languages.Create')" (click)="createOrEditLanguageModal.show()" class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewLanguage")}}</button> -->
      </div>
    </div>
  </div>

  <div class="m-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body m-portlet__body--no-padding">
        <div class="row m-row--no-padding m-row--col-separator-xl">
          <div class="col-md-12 col-lg-6 col-xl-4">
            <div class="m-widget24">
              <div class="m-widget24__item">
                <h4 class="m-widget24__title">
                  我的处理
                </h4>
                <br>
                <span class="m-widget24__desc">
                  需要我处理的管道
                </span>
                <span class="m-widget24__stats">
                  {{num.mycl}}
                </span>
                <div class="m--space-10"></div>
              </div>
            </div>
          </div>
          <div class="col-md-12 col-lg-6 col-xl-4">
            <div class="m-widget24">
              <div class="m-widget24__item">
                <h4 class="m-widget24__title">
                  其他处理
                </h4>
                <br>
                <span class="m-widget24__desc">
                  需要他人处理的管道
                </span>
                <span class="m-widget24__stats">
                  {{num.othercl}}
                </span>
                <div class="m--space-10"></div>
              </div>
            </div>
          </div>
          <div class="col-md-12 col-lg-6 col-xl-4">
            <div class="m-widget24">
              <div class="m-widget24__item">
                <h4 class="m-widget24__title">
                  已完成的
                </h4>
                <br>
                <span class="m-widget24__desc">
                  已经完成的管道
                </span>
                <span class="m-widget24__stats">
                  {{num.succl}}
                </span>
                <div class="m--space-10"></div>
              </div>
            </div>
          </div>
        </div>


        <div class="row align-items-center">
        </div>
      </div>
    </div>

    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__head">
        <div class="m-portlet__head-caption">
          <div class="m-portlet__head-title">
            <h3 class="m-portlet__head-text">
              管道列表
            </h3>
          </div>
        </div>
        <div class="m-portlet__head-tools">
          <ul class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm"
            role="tablist">
            <li class="nav-item m-tabs__item">
              <div class="btn-group m-btn-group" role="group" aria-label="...">
                <!-- <button type="button" class="btn btn-secondary m-btn--hover-brand">
                  我的处理
                </button>
                <button type="button" class="btn btn-secondary m-btn--hover-brand">
                  其他处理
                </button>
                <button type="button" class="btn btn-secondary m-btn--hover-brand">
                  全部
                </button> -->
                <button
                type="button"
                class="btn btn-secondary m-btn--hover-brand {{
                    className1
                }}"
                (click)="tabTypeClick(1)"
            >
            我的处理
            </button>
            <button
                type="button"
                class="btn btn-secondary m-btn--hover-brand {{
                    className2
                }}"
                (click)="tabTypeClick(2)"
            >
            其他处理
            </button>
            <button
                type="button"
                class="btn btn-secondary m-btn--hover-brand {{
                    className3
                }}"
                (click)="tabTypeClick(3)"
            >
            完成
            </button>
              </div>
            </li>
            <!-- <li class="nav-item m-tabs__item">
              <div class="btn-group m-btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-secondary m-btn--hover-brand">
                  批量处理
                </button>
              </div>
            </li> -->
            <li class="nav-item m-tabs__item" style="width: 300px; margin-left: 40px;">
              <a href="javascript:;" class="m-portlet__nav-link m-btn--pill">
                <div class="m-input-icon m-input-icon--right">
                  <input type="text" [(ngModel)]="filterText" (keyup.enter)="getPipes($event)" class="form-control m-input m-input--solid" placeholder="Search...">
                  <span class="m-input-icon__icon m-input-icon__icon--right">
                    <span (click)="getPipes($event)">
                      <i class="la la-search m--font-brand"></i>
                    </span>
                  </span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="m-portlet__body">
        <div class="row align-items-center" style="margin: 0;">
          <div class="tab-content" style="width:100%;">
            <div class="tab-pane active">
              <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                <div class="m-pipeline">
                  <div class="table-responsive">
                    <table #dataTable class="table" id="pipe-table">
                      <thead>
                        <tr>
                          <td class="m-pipeline__base">基础信息</td>
                          <td class="m-pipeline__status">状态信息</td>
                          <td class="m-pipeline__time">完成时间</td>
                          <td class="m-pipeline__node">节点信息</td>
                          <td class="m-pipeline__node">需求角色(人员)</td>
                          <td class="m-pipeline__action">操作</td>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let pipe of primengTableHelper.records">
                          <td>
                            <div class="row">
                              <div class="col-md-6">
                                <span class="m-pipeline__title">
                                  {{pipe.barCode}}
                                </span>
                                <span class="m-pipeline__sub">
                                  投产数量：{{pipe.amountPlanned}}
                                </span>
                              </div>
                              <div class="col-md-6">
                                <span class="m-pipeline__title">
                                  {{pipe.drawingCode}}
                                </span>
                                <span class="m-pipeline__sub">
                                  {{pipe.taskName}}
                                </span>
                              </div>
                            </div>
                          </td>

                          <td>
                            <span class="m-badge m-badge--success m-badge--wide">
                              {{pipe.statusName}}
                            </span>
                          </td>
                          <td>
                            <span>
                              {{pipe.dueDatePlanned | momentFormat:'YYYY-MM-DD'}}
                            </span>
                          </td>
                          <td>
                            <span>
                              {{pipe.actCode}} {{pipe.actName}}
                            </span>
                          </td>
                          <td>
                            <span>
                              {{pipe.actRole}}
                            </span>
                          </td>
                          <td>
                            <button type="button" class="btn btn-sm m-btn m-btn--gradient-from-danger m-btn--gradient-to-warning"
                              (click)="actBase.show(pipe)" *ngIf="isGranted('Mes51.Pages.Pipleline.Step.Process') && type==1">
                              处理
                            </button>
                            <div class="btn-group" dropdown [autoClose]="false" container="body" *ngIf="isGranted('Mes51.Pages.Pipleline.Step.Caret')&& type!=3">
                                <button id="button-nested" dropdownToggle type="button" class="btn btn-sm m-btn--gradient-from-accent m-btn--gradient-to-success dropdown-toggle"
                                        aria-controls="dropdown-nested" style="margin-left: 5px;">
                                        操作 <span class="caret"></span>
                                </button>
                                <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
                                    role="menu" aria-labelledby="button-nested">
                                  <li role="menuitem" dropdown triggers="mouseover" placement="top left"  container="body" class="dropleft">
                                    <a dropdownToggle class="dropdown-item dropdown-toggle"
                                       (click)="false">触发异常 </a>
                                    <ul *dropdownMenu class="dropdown-menu" role="menu" style="margin-left: -130px;">

                                      <a *ngFor="let actAbnormal of pipe.abNodes" class="dropdown-item" href="javascript:;"
                                        (click)="actAbnormalModal.show(pipe, actAbnormal)">
                                        {{actAbnormal}}
                                      </a>
                                      <a *ngFor="let actAbnormal of pipe.globalAbNodes" class="dropdown-item"
                                        href="javascript:;" (click)="actAbnormalModal.show(pipe, actAbnormal)">
                                        {{actAbnormal}}
                                      </a>
                                    </ul>
                                  </li>
                                  <li role="menuitem"><a class="dropdown-item" href="javascript:;" (click)="pipelineRun(pipe)"  *ngIf="type==1">运行管道</a></li>
                                </ul>
                              </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="primeng-paging-container">
                      <p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}" #paginator (onPageChange)="getPipes($event)"
                        [totalRecords]="primengTableHelper.totalRecordsCount" [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                      </p-paginator>
                      <span class="total-records-count"> {{'总计:' + primengTableHelper.totalRecordsCount}} </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <act-base #actBase (modalRun)="getPipes()"></act-base>
  <actAbnormalModal #actAbnormalModal (modalSave)="getPipes()"></actAbnormalModal>
</div>

